<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding:0;
		margin:0;
	}
	.ss{
		border-collapse: collapse;
	}
	.xx{
		width:60px;
		height:30px;
		text-align: center;
		border:1px solid #ccc;
		
	}
	.no{display: inline-block;width: 16px; height: 16px;  0px -96px no-repeat;}
			.one{display: inline-block;width: 16px; height: 16px; background: url(star-matrix.gif) 0px -16px no-repeat;}
			.two{display: inline-block;width: 16px; height: 16px; background: url(star-matrix.gif) 0px -96px no-repeat;}
	</style>
</head>
<body>
	<script>
	/*打印平行四边形*/
          document.write("<hr />");
           var s=6;
            for(var i=1;i<=6;i++){
          	for(var j=1;j<=2*(i-1);j++){
          		document.write("<span class='no'></span>");
          	}
          	for(var k=1;k<=12;k++){
          		document.write("<span class='one'></span>");
          	}
          	document.write("<br />");
          }

          /*打印平行四边形*/
          document.write("<hr />");
           var s=10;
            for(var i=1;i<=s;i++){
          	    for(var j=1;j<=s-i;j++){
          		document.write("<span class='no'></span>");
          	    }
                for(x=1;x<=11;x++){
                document.write("<span class='one'></span>");
          	    }
          	document.write("<br />"); 
          }
      // 第一题*********************************************************
          document.write("<hr />");
           var s=10;
            for(var i=1;i<=s;i++){
          	for(var j=1;j<=s-i;j++){
          		document.write("<span class='no'></span>");
          	}
          	for(var k=1;k<=2*i-1;k++){
          		if(k==1 || k==(2*i-1) || i==10){
          			document.write("<span class='one'></span>");
          		}
          		else{
          			document.write("<span class='no'></span>");
          		}
          		
          	}
          	document.write("<br />"); 
          }
 // 第二题*********************************************************
          document.write("<hr />");
           var s=10;
            for(var i=1;i<=s;i++){
          	for(var j=1;j<=s-i;j++){
          		document.write("<span class='no'></span>");
          	}
          	for(var k=1;k<=2*i-1;k++){
          		if(k==1 || k==(2*i-1) || i==10 && k%2 ==1){
          			document.write("<span class='two'></span>");
          		}
          		else{
          			document.write("<span class='no'></span>");
          		}
          		
          	}
          	document.write("<br />"); 
          }         	
// 第三题*********************************************************
          document.write("<hr />");
           var s=10;
            for(var i=1;i<=s;i++){
          	for(var j=1;j<=s-i;j++){
          		document.write("<span class='no'></span>");
          	}
          	for(var k=1;k<=2*i-1;k++){
          		if(k==1 || k==(2*i-1) || k==i || i==10){
          			document.write("<span class='one'></span>");
          		}
          		else{
          			document.write("<span class='no'></span>");
          		}
          		
          	}
          	document.write("<br />"); 
          }         	
// 99加减表

  document.write("<hr />");
          document.write("<table  class='ss'>")        
          var s=0;
            for(var i=1;i<=9;i++){
            document.write("<tr >");
            for(var j=1;j<=i;j++){
              document.write("<td class='xx'>");
              s=(i-j+1)+j;
              document.write((i-j+1) + "+" + j+"="+s+" ");   
              document.write("</td>");
             }     
            document.write("<br />"); 
            document.write("</tr>");
          }
         document.write("</table>");

  document.write("<hr />");


          document.write("<table class='ss'>");
          var s=0;

            for(var i=1;i<=9;i++){
            	document.write("<tr>");
          	for(var j=1;j<=i;j++){
               document.write("<td class='xx'>");
          		s=(i+1)-j;
             document.write((i+1) + "-" + j+"="+s+" ");
             document.write("</td>");
          }
          	document.write("<br />"); 
          	document.write("</tr>");
          }  
          document.write("</table>");       	   	
	</script>
</body>
</html>